<script setup>
import {getCurrentInstance, ref} from "vue";
import {
  getMyStudent,
  getRecentPractice,
  getRecentPracticeData,
  getRecentVideo,
  getRecentVideoData
} from "../../api/home/parent.js";
import moment from "moment/moment.js";

// 学生列表
let studentList = ref([])
// 学生选项
let studentOption = ref([])
// 选中的学生用户名
let selectedUsername = ref();
// 当前describe展示的学生信息
let nowShowUser = ref();
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
function updateDescription() {
  // 获取当前用户名在学生列表中的下标
  let index = studentList.value.findIndex(item => item.username === selectedUsername.value);
  nowShowUser.value = studentList.value[index];
}
getMyStudent().then(res => {
  studentList.value = res.data;
  nowShowUser.value = res.data[0];
  let dates = [];
  for (let i = 6; i >= 0; i--) {
    dates.push(moment().subtract(i, 'days').format('MM-DD'));
  }
  getRecentVideo(nowShowUser.value.id).then(res => {
    let dom = document.querySelector('.video-count-echarts');
    let myChart = echarts.init(dom);
    const option = {
      title: {
        text: '最近一周观看视频次数',
        left: 'center'
      },
      // 鼠标悬停显示数据
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff', // 悬浮框背景色
        borderColor: '#000', // 悬浮框边框颜色
        borderWidth: 1, // 悬浮框边框宽度
        textStyle: { // 悬浮框文字样式
          color: '#000',
          fontSize: 12
        }
      },
      xAxis: {
        type: 'category',
        data: dates
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: res.data,
          type: 'line'
        }
      ]
    };
    myChart.setOption(option)
  })
  getRecentPractice(nowShowUser.value.id).then(res => {
    let dom = document.querySelector('.practice-count-echarts');
    let myChart = echarts.init(dom);
    const option = {
      title: {
        text: '最近一周练习次数',
        left: 'center'
      },
      // 鼠标悬停显示数据
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff', // 悬浮框背景色
        borderColor: '#000', // 悬浮框边框颜色
        borderWidth: 1, // 悬浮框边框宽度
        textStyle: { // 悬浮框文字样式
          color: '#000',
          fontSize: 12
        }
      },
      xAxis: {
        type: 'category',
        data: dates
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: res.data,
          type: 'line'
        }
      ]
    };
    myChart.setOption(option)
  })
  getRecentPracticeData(nowShowUser.value.id).then(res => {
    let dom = document.querySelector('.practice-detail-pie-echarts');
    let myChart = echarts.init(dom);
    const option = {
      title: {
        text: '最近一周练习的题目',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '练习题目',
          type: 'pie',
          radius: '50%',
          data: res.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option)
  })
  getRecentVideoData(nowShowUser.value.id).then(res => {
    let dom = document.querySelector('.video-detail-pie-echarts');
    let myChart = echarts.init(dom);
    const option = {
      title: {
        text: '最近一周观看的视频',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '观看视频',
          type: 'pie',
          radius: '50%',
          data: res.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option)
  })
  for ( let i = 0 ; i < res.data.length ; i ++ ) {
    studentOption.value.push({ value: res.data[i].username, label: res.data[i].username })
  }
})
</script>

<template>
  <div class="common-layout">
    <el-container class="box-container">
      <div class="box-outer">
        <div class="student-info">
          <el-card class="student-card" shadow="always">
            <el-descriptions
                v-if="nowShowUser"
                class="margin-top"
                title="学生信息"
                :column="3"
                border
            >
              <template #extra>
                <div style="display: flex">
                  <el-select v-model="selectedUsername" style="margin-right: 10px;width: 250px" placeholder="请选择您要查询的学生的信息">
                    <el-option
                      v-for="item in studentOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      @change="updateDescription"
                    >
                    </el-option>
                  </el-select>
                  <el-button type="primary">添加</el-button>
                </div>
              </template>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <user />
                    </el-icon>
                    学生姓名
                  </div>
                </template>
                {{nowShowUser.username}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <iphone />
                    </el-icon>
                    学生电话
                  </div>
                </template>
                {{nowShowUser.phone}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <location />
                    </el-icon>
                    学号
                  </div>
                </template>
                <el-tag type="success">{{nowShowUser.no}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <tickets />
                    </el-icon>
                    学校
                  </div>
                </template>
                <el-tag :effect="'dark'" size="small">{{nowShowUser.schoolName}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <office-building />
                    </el-icon>
                    家庭住址
                  </div>
                </template>
                {{nowShowUser.address}}
              </el-descriptions-item>
            </el-descriptions>
            <el-empty v-else description="暂无数据"></el-empty>
          </el-card>
        </div>
        <el-divider class="divider"></el-divider>
        <div class="learn-detail">
          <span class="title">学习情况</span>
          <div class="learn-echarts">
            <div class="divide-echarts">
            <!-- 近7日练习数量 -->
            <el-card class="practice-count-echarts" style="width: 48%;height: 90%"></el-card>
            <!-- 近7日观看视频数量 -->
            <el-card class="video-count-echarts" style="width: 48%;height: 90%"></el-card>
            </div>
            <div class="divide-echarts">
              <!-- 近7日练习数量 -->
              <el-card class="practice-detail-pie-echarts" style="width: 48%;height: 90%"></el-card>
              <!-- 近7日观看视频数量 -->
              <el-card class="video-detail-pie-echarts" style="width: 48%;height: 90%"></el-card>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.common-layout {
  width: 100%;
  height: 100vh;
  .box-container {
    width: 100%;
    height: 100%;
    .box-outer {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      .student-info {
        margin-top: 15px;
        width: 100%;
        height: 20%;
        .student-card {
          margin-top: 15px;
        }
      }
      .divider {
        width: 100%;
      }
      .learn-detail {
        margin-top: -10px;
        width: 100%;
        height: 100%;
        .learn-echarts {
          margin-top: 15px;
          width: 100%;
          height: 90%;
          .divide-echarts {
            display: flex;
            width: 100%;
            height: 50%;
            justify-content: space-between;
          }
        }
      }
      .data-echarts {
        width: 100%;
        height: 40%;
      }
    }
  }
}
.title {
  font-size: 20px;
  font-weight: bold;
}
</style>